#content{
    overflow-y: auto;
    height: 328px;
}

#content-internal{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#tools{
    display:  flex;
    align-items: center;
    border-top: 1px solid #f3f3f3;
    height: 50px;
}

#tools-content{
    margin-left: 32px;
    width: 113px;
    display: inherit;
    align-items: center;
    justify-content: space-between;
}

#emoj{
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    width: 30px;
    height: 30px;
}

#emoj:hover{
  background-color: #dadada
}

#textInput{
    font-size: 14px;
    height: 60px;
    display: flex;
    justify-content: center;
}

#text-area{
    outline: none;
    border: 0px;
    padding: 0px;
    height: 100%;
    width: 99%;
    resize: none;
    font-size: 14px;
}

#text-area::-webkit-scrollbar-track ,#content::-webkit-scrollbar-track
{
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #ffffff;
}

#text-area::-webkit-scrollbar,#content::-webkit-scrollbar
{
	width: 8px;
	background-color: #ffffff;
}

#text-area::-webkit-scrollbar-thumb,#content::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #f3f3f3;
}


#buttonInput{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 16px;
    height: 60px;
}

#buttonInput button{
    margin: 0px 17px;
    color: #ffffff;
    background-color: #3a84ff;
    border-radius: 6px;
    width: 93px;
    height: 32px;
}

#buttonInput p{
    margin: 0px;
    color: #626262;
}

.my{
   position: relative;
   display: flex;
   justify-content: flex-end;
   margin-right: 80px;
   margin-top: 30px;
}

.info{
    word-wrap: break-word;
    max-width: 80%;
}

.my .info{
   display: inline-block;
   border-radius: 5px;
   background-color: #b0ceff;
   font-size: 16px;
   padding: 12px;
}

.my .info::before{
   content: '';
   border-right: 0px solid #b0ceff;
   border-bottom:15px solid #b0ceff;
   border-bottom-right-radius: 15px 20px;
   height: 20px;
   width: 20px;
   position: absolute;
   top: -5px;
   right: -12px;
   z-index: -1;
}

.my > img:last-child{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0px;
    right: -60px;
 }

 .its{
    position: relative;
    display: flex;
    justify-content: flex-start;
    margin-left: 80px;
    margin-top: 30px;
 }
 
 .its .info{
    display: inline-block;
    border-radius: 5px;
    background-color: #f3f3f3;
    font-size: 16px;
    padding: 12px;
 }
 
 .its .info::before{
    content: '';
    border-left: 0px solid #f3f3f3;
    border-bottom:15px solid #f3f3f3;
    border-bottom-left-radius: 15px 20px;
    height: 20px;
    width: 20px;
    position: absolute;
    top: -5px;
    left: -12px;
    z-index: -1;
 }
 
 .its > img:last-child{
     width: 40px;
     height: 40px;
     position: absolute;
     top: 0px;
     left: -60px;
}

.sys{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.sys .info{
    background-color: #dadada;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    padding:5px;
 }

 #emoji-picker{
   display: none;
   position: absolute;
   bottom: 30px;
   left:-32px;
 }

 #emoj:hover #emoji-picker{
   display: block;
 }
